<template>
    <div class="main">
        <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-tabs v-model="active"  swipeable animated>
            <van-tab title="全部">
                <van-list  :finished="finished" finished-text="没有更多了" >
                    <div class="orderList" v-for="item in list" :key="item.id" >
                        <van-cell :title="item.create_time_text" style="border-bottom: 1px solid #F1F3F6;">
                            <template  #right-icon v-if="item.state_tip == '待付款'">
                                {{item.state_tip}}                                    
                            </template>
                            <template #right-icon v-else>
                                <div style="display:flex;justify-content:space-between;align-items:center">
                                    <span>已取消</span>&nbsp;|&nbsp;
                                    <van-icon name="delete-o" size="20" @click="handleDel(item.order_sn)"/>
                                </div>
                            </template>
                        </van-cell>
                        <div @click="handleDetail(item.order_sn)" style="width: 95%;margin: auto;margin-top:5px;display: flex;justify-content: space-between;border-bottom: 1px solid #F1F3F6;">
                            <img :src="item.products[0].images[0]" alt="" style="width: 60px;height: 60px;">
                            <div style="display: flex;flex-direction: column;">
                                <p style="width: 280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #303133;font-size: 15px;">{{ item.products[0].title }}</p>
                                <span style="font-size: 13px;color: #909399;padding: 0 5px;margin: 5px;">{{ item.products[0].attributes }} x{{ item.products[0].quantity }}</span>
                                <span style="color: #303133;font-size: 15px;">￥{{ item.products[0].product_price }}</span>
                                <p style="padding-left: 120px;padding-top: 20px;margin-bottom: 10px;color: #909399;font-size: 13px;">共{{ item.products[0].quantity }}件商品 实付款￥{{ item.products[0].price }}</p>
                            </div>
                        </div>
                        <div style="margin:5px 0;padding-left: 200px;" v-if="item.state_tip == '待付款'">
                            <button style="border: none;border-radius: 20px;
                            border: 1px solid #E6E6E6; background-color: #fff;
                            padding:5px 10px;font-size: 13px;margin-right: 5px;" @click.stop="handleCancel(item.order_sn)">取消订单</button>
                            <button style="border: none;border-radius: 20px;
                            border: 1px solid #f7bcc8; background-color: #FFF9F9;
                            padding:5px 10px;font-size: 13px;color: #fa436a;" @click.stop="handlePay(item)">立即支付</button>
                        </div>
                    </div>
                </van-list>
            </van-tab>
            <van-tab title="待付款">
                <van-list  :finished="finished" finished-text="没有更多了" >
                    <div class="orderList" v-for="item in list" :key="item.id" >
                        <van-cell :title="item.create_time_text" style="border-bottom: 1px solid #F1F3F6;">
                            <template  #right-icon v-if="item.state_tip == '待付款'">
                                {{item.state_tip}}                                    
                            </template>
                            <template #right-icon v-else>
                                <div style="display:flex;justify-content:space-between;align-items:center">
                                    <span>已取消</span>&nbsp;|&nbsp;
                                    <van-icon name="delete-o" size="20" @click="handleDel(item.order_sn)"/>
                                </div>
                            </template>
                        </van-cell>
                        <div @click="handleDetail(item.order_sn)" style="width: 95%;margin: auto;margin-top:5px;display: flex;justify-content: space-between;border-bottom: 1px solid #F1F3F6;">
                            <img :src="item.products[0].images[0]" alt="" style="width: 60px;height: 60px;">
                            <div style="display: flex;flex-direction: column;">
                                <p style="width: 280px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #303133;font-size: 15px;">{{ item.products[0].title }}</p>
                                <span style="font-size: 13px;color: #909399;padding: 0 5px;margin: 5px;">{{ item.products[0].attributes }} x{{ item.products[0].quantity }}</span>
                                <span style="color: #303133;font-size: 15px;">￥{{ item.products[0].product_price }}</span>
                                <p style="padding-left: 120px;padding-top: 20px;margin-bottom: 10px;color: #909399;font-size: 13px;">共{{ item.products[0].quantity }}件商品 实付款￥{{ item.products[0].price }}</p>
                            </div>
                        </div>
                        <div style="margin:5px 0;padding-left: 200px;" v-if="item.state_tip == '待付款'">
                            <button style="border: none;border-radius: 20px;
                            border: 1px solid #E6E6E6; background-color: #fff;
                            padding:5px 10px;font-size: 13px;margin-right: 5px;" @click.stop="handleCancel(item.order_sn)">取消订单</button>
                            <button style="border: none;border-radius: 20px;
                            border: 1px solid #f7bcc8; background-color: #FFF9F9;
                            padding:5px 10px;font-size: 13px;color: #fa436a;" @click.stop="handlePay(item)">立即支付</button>
                        </div>
                    </div>
                </van-list>
            </van-tab>
            <van-tab title="待收货">
                <img src="@/assets/nothing.png" alt="" style="">
            </van-tab>
            <van-tab title="待评价">
                <img src="@/assets/nothing.png" alt="">
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import {orderState,orderCancel,orderDel} from "@/api/order"
export default {
   data() {
      return {
        active:0,
        list: [],
        loading: false,
        finished: false,
        page:1
      }
   },
   created(){
        this.active = Number(this.$route.query.state);
        this.handleOrder();
   },
   computed:{
   },
   watch:{
        active(val){
            orderState({state:val,page:1}).then(res=>{
                this.list = res.data.data.data;
            })
        }
   },
   methods:{
    handleOrder(){
        orderState({state:this.active,page:this.page}).then(res=>{
            this.list = res.data.data.data;
        })
    },
    onClickLeft(){
        this.$router.go(-1);
    },
    // onLoad() {
    //   setTimeout(() => {
    //     this.loading = false;
    //     if (this.list.length >= 40) {
    //       this.finished = true;
    //     }
    //   }, 1000);
    //   if(this.page == 23) return;
    //     orderState({state:this.active,page:this.page}).then(res=>{
    //         if(res.data.data.data.length){
    //             this.page++;
    //         }
    //         res.data.data.data.forEach(item=>{
    //             if(this.list.indexOf(item.id)==-1){
    //                 this.list.push(item);
    //             }
    //         })
    //     });
    // },
    handleDetail(item){
        this.$router.push({path:"/orderDetail",query:{order_sn:item,state:this.active}});
    },
    handleCancel(sn){
        this.$dialog.confirm({
            title:"提示",
            message:"确定取消订单吗？"
        }).then(()=>{
            orderCancel({order_sn:sn});
            this.$router.go(0)
        }).catch(()=>{})
    },
    handlePay(item){
        this.$router.push({path:"/createOrder",query:{quantity:item.products[0].quantity,sku_id:item.products[0].sku_id}});
    },
    handleDel(sn){
        this.$dialog.confirm({
            title:"提示",
            message:"确定删除订单吗？"
        }).then(()=>{
            orderDel({order_sn:sn});
            this.$router.go(0)
        }).catch(()=>{})
    }
   },
}
</script>
<style scoped>
    .main{
        background-color: #F7F7F7;
    }
    .orderList{
        width: 100%;
        height: 210px;
        background-color: #fff;
        margin: 10px 0;
    }
</style>
